<!-- 佣金明细列表页 -->
<template>
  <view v-if="shenheStatus == 0" class="commission">
    <view class="header-tabs">
      <u-tabs
        :list="tabList"
        :current="status"
        active-color="#FA230A"
        item-width="33.33%"
        @change="tabsChange"
        height="44"
        inactive-color="#262626"
      ></u-tabs>
    </view>

    <view class="contentBox">
      <view class="queryBox">
        <picker mode="date" fields="month" @change="changeDate">
          <view class="date">
            <text>{{ !queryDate ? $t("mdAdmin.queryTime") : queryDate }}</text>
            <text class="iconfont icon-arrow-down-filling"></text>
          </view>
        </picker>
        <text class="count"
          >{{ $t("shareholder.commi") }} ￥{{ total || 0 }}</text
        >
      </view>

      <view class="commissionList">
        <view class="item" v-for="(item, index) in listData" :key="index">
          <view class="icons">
            <view>
              <i class="iconfont icon-consumption-fill"></i>
            </view>
          </view>

          <view class="con">
            <view class="name">{{ item.order_no }}</view>
            <view class="date">{{ item.created_at }}</view>
          </view>

          <view class="fd">
            <view class="price">+{{ item.total_profit }}</view>
            <view class="des" :class="getType(item.is_send)[0]">{{
              getType(item.is_send)[1]
            }}</view>
          </view>
        </view>
      </view>

      <toolsMore :status="moreStatus"></toolsMore>
      <view class="empty" style="padding-top: 50rpx" v-if="!listData.length">
        <u-empty mode="data"></u-empty>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";
export default {
  components: {
    Shenhe,
    toolsMore
  },

  data() {
    return {
      tabList: [
        {
          name: this.$t("person.cashStatus1"),
          status: 0
        },
        {
          name: this.$t("shareholder.noGet"),
          status: 1
        },
        {
          name: this.$t("shareholder.getted"),
          status: 2
        }
      ],

      status: 0,
      queryDate: "",
      listData: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      total: 0
    };
  },

  onLoad(t) {
    if (t.status) {
      this.status = t.status;
    }
    this.clearData();
  },

  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getListData();
  },

  onPullDownRefresh() {
    this.clearData();
  },

  computed: {
    getType() {
      return (is_send) => {
        let arr = ["", "未到账"];

        switch (is_send) {
          case "1":
            arr[0] = "on";
            arr[1] = "已到账";
            break;

          default:
            break;
        }

        return arr;
      };
    }
  },

  onShow() {},
  watch: {},

  methods: {
    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.listData = [];

      this.getListData();
    },

    changeDate(e) {
      this.queryDate = e.detail.value;
      this.clearData();
    },

    tabsChange(e) {
      if (e == this.current) return;

      this.page = 1;
      this.listData = [];
      this.noMore = false;
      this.status = e;
      this.clearData();
    },

    getListData() {
      let { listData: oldList, page, status, queryDate } = this;

      this.moreStatus = 2;
      this.$allrequest.mdAdmin
        .getCommissionList({
          page,
          status,
          queryDate
        })
        .then((res) => {
          uni.stopPullDownRefresh();

          this.moreStatus = 1;

          if (!res.code) {
            let { list, total_price } = res.data;

            this.total = total_price || 0;
            if (list.length) {
              oldList.push(...list);
              this.page = this.page + 1;
            }

            if (oldList.length >= count) {
              this.isEnd = true;
              this.moreStatus = 3;
            }
          }
        })
        .catch(() => {
          this.moreStatus = 1;
          uni.stopPullDownRefresh();
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.commission {
  min-height: 100vh;
  padding-top: 90rpx;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
}

.header-tabs {
  width: 100%;
  padding-top: 20rpx;
  height: 90rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  z-index: 1000;
  left: 0;
}

.contentBox {
  padding: 0 30rpx;
  margin-top: 24rpx;
  background-color: #fff;

  .queryBox {
    padding: 30rpx 0;
    font-size: 26rpx;
    border-bottom: 1px solid #f8f8f8;

    .date {
      font-weight: 600;
      display: flex;
      align-items: center;
      margin-bottom: 12rpx;

      .iconfont {
        margin-left: 20rpx;
      }
    }
  }
}

.commissionList {
  .item {
    position: relative;
    display: flex;
    padding: 30rpx 0;
  }

  .name {
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    color: #000;
  }

  .date {
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .fd {
    text-align: right;
  }

  .price {
    padding: 10rpx 0;
    font-size: 36rpx;
    color: #000;
    font-weight: bold;
  }

  .des {
    font-size: 26rpx;
    color: #f0250e;

    &.on {
      color: #8c8c8c;
    }
  }

  .icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background: #fec121;
    overflow: hidden;

    .iconfont {
      color: #fff;
      font-size: 54rpx;
    }
  }

  .con {
    flex: 1;
    margin: 0 24rpx;
    overflow: hidden;
  }
}
</style>
